<template xmlns:v-popover="http://www.w3.org/1999/xhtml">
  <div id="home">
    <el-container>
      <el-header :style="'background-color:'+headColor">
        <div class="headerLeft">
          <img src="../assets/si.png" width="40px" style="vertical-align: middle">
          <span style="margin-left: 15px">思云课堂后台业务管理系统</span>
        </div>
        <div class="headerRight">
          <el-popover ref="userbotton" placement="bottom" trigger="hover">
            <account-information></account-information>
          </el-popover>
          <span v-popover:userbotton>
            <el-avatar size="medium" fit="contain" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @error="errorHandler">
              <img alt="用户头像" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          admin
          </span>
          <el-divider direction="vertical"></el-divider>
          <i class="el-icon-s-home" title="返回首页" @click="toHome" style="cursor: pointer"></i>
          <el-divider direction="vertical"></el-divider>
          <el-popover ref="commonMenu" placement="bottom" trigger="hover">
            <commonMenu></commonMenu>
          </el-popover>
          <span v-popover:commonMenu>
          <i class="el-icon-menu"></i>
        </span>
          <el-divider direction="vertical"></el-divider>
          <el-popover ref="message" placement="bottom" trigger="hover">
            <message></message>
          </el-popover>
          <span v-popover:message>
          <i class="el-icon-message-solid"></i>
        </span>
          <el-divider direction="vertical"></el-divider>
          <span>
            <el-color-picker
                v-model="headColor"
                show-alpha
                :predefine="predefineColors">
            </el-color-picker>
          </span>
          <el-divider direction="vertical"></el-divider>
          <i class="el-icon-switch-button" @click="exit" title="退出登录" style="cursor: pointer"></i>
        </div>
      </el-header>
      <el-container >
        <div class="aside">
          <el-aside width="280px">
            <Menus></Menus>
          </el-aside>
        </div>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//账号信息组件
import accountInformation from "../components/accountInformation";
//常用菜单组件
import commonMenu from "../components/commonMenu";
//提示信息组件
import message from "../components/message";
import router from "../router";
//左导航菜单组件
import Menus from "../components/menus";

export default {
  name: 'Home',
  data(){
    return{
      headColor:'rgba(30, 144, 255, 1)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
  components: {
    accountInformation,commonMenu,message,Menus
  },
  methods: {
    errorHandler() {
      return true
    },
    exit(){
      router.replace('/')
    },
    toHome(){
      // router.replace('/home')
    },
  }
};

</script>
<style scoped>
html,body,#home,.el-container {
  height: 100%;
}
#home {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.el-header {
  color: white;
  text-align: left;
  line-height: 60px;
  display: flex;
  flex-direction: row;
}
.el-header i{
  font-size: 26px;
  vertical-align:middle;
}
.headerLeft{
  font-size: 30px;
  font-weight: 600;
}
.headerRight{
  flex-grow: 1;
  text-align: right;
}
.el-color-picker{
  vertical-align:middle;
}
.el-container .aside{
  overflow: hidden;
}
.el-aside {
  color: #333;
  text-align: left;
  height: 100%;
  overflow-y: auto;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
.el-divider{
  background-color: black!important;
  height: 1.5em!important;
}
.el-avatar{
  vertical-align: middle;
}
</style>
